<template>
    <div class="shopContainer">
        <div class="shopContent">
            <div class="back" @click="goBack"></div>
            <p class="title">购物车</p>
            <div class="deleteImg" @click="deleteGoods"></div>
        </div>
        <div class="goodsContainer">
            <ul class="goods">
                <li v-for="good in goods" :key="good.id">
                    <div class="good">
                        <div class="notChooseImg" v-if="!good.isSelect" @click="ifShow(good.id)"></div>
                        <div class="chooseImg" v-if="good.isSelect" @click="ifShow(good.id)"></div>
                        <div class="goodImg" :style="goodImg(good.id)"></div>
                        <div class="goodInfo">
                            <p class="goodTitle">{{ good.name }} {{ good.description }}</p>
                            <div class="tag">
                            <div class="priceImg" :style="{backgroundImage:'url('+backImg(good)+')'}"></div>
                                <div class="typeImg" :style="{backgroundImage:'url('+typeBackImg(good)+')'}"></div>
                            </div>
                            <div class="price">
                                <p class="index">￥</p>
                                <p class="num">{{ good.amount }}</p>
                                <p class="beforeNum">￥40</p>
                            </div>
                        </div>
                        <div class="changeNum">
                            <div class="reduce" @click="reduce(good.id)">-</div>
                            <p class="thisNum">{{ good.number }}</p>
                            <div class="add" @click="good.number++">+</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <p class="like">--猜你喜欢--</p>
        <div class="moreContainer">
            <ul class="moreGoods">
                <li v-for="moreGood in moreGoods" :key="moreGood.id">
                    <div class="moreGood">
                        <div class="showImg"></div>
                        <p class="intro">{{ moreGood.intro }}</p>
                        <div class="moreTag">
                            <div class="morePriceImg" :style="{backgroundImage:'url('+backImg(moreGood)+')'}"></div>
                            <div class="moreTypeImg" :style="{backgroundImage:'url('+typeBackImg(moreGood)+')'}"></div>
                        </div>
                        <div class="morePrice">
                            <p class="moreIndex">￥</p>
                            <p class="moreNum">{{ moreGood.num }}</p>
                            <p class="other">起</p>
                        </div>
                        <div class="card" @click="addCard(moreGood.id)"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="pay">
            <div class="payContent">
                <div class="cashPay">
                    <div class="notPayImg" v-if="isPay" @click="ifPay"></div>
                    <div class="payImg" v-if="!isPay" @click="ifPay"></div>
                    <p class="payAll">全选</p>
                </div>
                <div class="countContainer">
                    <p class="countTitle">合计:</p>
                    <div class="payNumContainer">
                        <p class="payIndex">￥</p>
                        <p class="payNum">{{ payNum }}</p>
                        <div class="gotoPay" @click="gotoConfirm">去结算</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name:'shoppingCard',
        data(){
            return{
                isPay:true,
                goods:[
                    // {id:0,title:'低糖水果 蓝莓西柚 现摘现发 新鲜水果',num:28.8,beforeNum:40.8,changeNum:1,price:'6-8good',gtype:'6-1fruit',isShow:true},
                    // {id:1,title:'无糖豆浆粉原味无添加剂早餐黄豆粉',num:28.8,beforeNum:40.8,changeNum:1,price:'6-9cheap',gtype:'6-2drink',isShow:true},
                ],
                moreGoods:[
                    {id:1,intro:'低糖水果 蓝莓西柚 现摘现发 新鲜水果',num:38.8,price:'6-8good',gtype:'6-1fruit'},
                    {id:2,intro:'无糖豆浆粉原味无添加剂早餐 黄豆粉',num:28.8,price:'6-9cheap',gtype:'6-2drink'},
                    {id:3,intro:'坚果 巴旦木核桃 优质脂肪 每日坚果',num:48.8,price:'6-9cheap',gtype:'6-3eat'},
                    {id:4,intro:'卫生巾 女性生理期卫生用品 卫生巾特惠',num:28.8,price:'6-9cheap',gtype:'6-4life'},
                ],
            }
        },
        methods:{
            goodImg(id){
                for(let i=0;i<this.goods.length;i++){
                    if(this.goods[i].id==id){
                        return `backgroundImage:url(${this.goods[i].image})`
                    }
                }
            },
            goBack(){
                this.$router.back()
            },
            ifShow(id){
                for(let i=0;i<this.goods.length;i++){
                    if(this.goods[i].id==id){
                        if(this.goods[i].isSelect==0){
                            this.goods[i].isSelect=1
                            axios({
                                url:`http://localhost:8080/polycystic/shoppingCart/${id}`,
                                method:'get',
                                headers:{
                                    token:localStorage.getItem('jwt')
                                }
                            }).then(res=>{
                                console.log(res.data.data);
                            })
                        }
                        else{
                            this.goods[i].isSelect=0
                            axios({
                                url:`http://localhost:8080/polycystic/shoppingCart/${id}`,
                                method:'get',
                                headers:{
                                    token:localStorage.getItem('jwt')
                                }
                            }).then(res=>{
                                console.log(res.data.data);
                            })
                        }
                    }
                }
            },
            reduce(id){
                let index=0
                for(let i=0;i<this.goods.length;i++){
                    if(this.goods[i].id==id){
                        if(this.goods[i].number>1){
                            this.goods[i].number--
                        }
                        axios({
                            url:'http://localhost:8080/polycystic/shoppingCart/sub',
                            method:'post',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                'goodsId':this.goods[i].goodsId
                            }
                        })
                    }
                }
            },
            ifPay(){
                this.isPay=!this.isPay
                for(let i=0;i<this.goods.length;i++){
                    if(this.isPay==true){
                        this.goods[i].isSelect=0
                    }
                    else{
                        this.goods[i].isSelect=1
                    }
                }
            },
            deleteGoods(){
                let newId=0;
                let newArr=[];
                for(let i=0;i<this.goods.length;i++){
                    if(this.goods[i].isSelect!==1){
                        this.goods[i].id=newId
                        newId++
                        newArr.push(this.goods[i])
                    }
                }
                this.goods=newArr
            },
            gotoConfirm(){
                let order=''
                if(this.payNum>0){
                    axios({
                        url:'http://localhost:8080/polycystic/order/submit',
                        method:'post',
                        headers:{
                            token:localStorage.getItem('jwt')
                        },
                        data:{
                            'amount':this.payNum
                        }
                    }).then(res=>{
                        this.$router.push({
                            name:'confirmOrder',
                            params:{
                                order:res.data.data
                            }
                        })
                    })
                }
            },
            addCard(id){
                for(let i=0;i<this.moreGoods.length;i++){
                    if(this.moreGoods[i].id===id){
                        this.goods.push({
                            id:this.goods.length,
                            title:this.moreGoods[i].intro,
                            num:this.moreGoods[i].num,
                            beforeNum:40.8,
                            changeNum:1,
                            price:this.moreGoods[i].price,
                            gtype:this.moreGoods[i].gtype,
                            isShow:true
                        })
                    }
                }
            }
        },
        computed:{
            backImg(){
                return (good) =>{
                    return require(`../assets/img/6-icon@2x/6-8good.png`)
                }
            },
            typeBackImg(){
                return (good)=>{
                    return require(`../assets/img/6-icon@2x/6-2drink.png`)
                }
            },
            payNum(){
                let num=0
                for(let i=0;i<this.goods.length;i++){
                    if(this.goods[i].isSelect===1){
                        num+=(this.goods[i].amount)*(this.goods[i].number)
                    }
                }
                return num.toFixed(2);
            }
        },
        mounted(){
            // this.goods.push({
            //     id:this.goods.length,
            //     title:this.$route.query.title,
            //     num:this.$route.query.num,
            //     beforeNum:this.$route.query.beforeNum,
            //     changeNum:this.$route.query.changeNum,
            //     price:this.$route.query.price,
            //     gtype:this.$route.query.gtype,
            //     isShow:this.$route.query.isShow
            // })
            axios({
                method:'get',
                url:'http://localhost:8080/polycystic/shoppingCart/list',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                console.log(res.data.data);
                this.goods=res.data.data
            })
        },
        beforeDestroy(){
            this.$bus.$off('addCard')
        }
    }
</script>

<style scoped>
    .shopContainer{
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .pay{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .shopContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        margin-right: .32rem;
        background-position: center;
        background-size: contain;
    }
    .deleteImg{
        width: .72rem;
        height: .72rem;
        background-image: url(../assets/img/6-icon@2x/6-12delete.png);
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .goodsContainer{
        width: 6.86rem;
        margin: 0 auto;
        margin-top: 1.76rem;
    }
    .goods{
        width: 100%;
    }
    .good{
        width: 100%;
        height: 2.4rem;
        border-radius: .2rem;
        background-color: #FFF;
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
        position: relative;
    }
    .notChooseImg{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-13notCheck.png);
        margin-left: .2rem;
    }
    .chooseImg{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-14check.png);
        margin-left: .2rem;
    }
    .goodImg{
        width: 1.4rem;
        height: 1.4rem;
        background-color: #F6F8FA;
        margin-left: .12rem;
        background-position: center;
        background-size: cover;
    }
    .goodInfo{
        width: 210px;
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-left: .2rem;
    }
    .goodTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        margin-top: 13px;
    }
    .tag{
        display: flex;
        align-items: center;
        margin-top: .1rem;
    }
    .priceImg{
        width: .44rem;
        height: .28rem;
        background-position: center;
        background-size: contain;
    }
    .typeImg{
        width: .8rem;
        height: .26rem;
        background-position: center;
        background-size: contain;
        margin-left: .1rem;
    }
    .price{
        margin-top: .1rem;
        color:#FB4866;
        display: flex;
        align-items:end;
    }
    .index{
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        text-align: center;
    }
    .num{
        font-family: 'PingFangSC-Bold';
        font-size: .32rem;
    }
    .beforeNum{
        color: #33333355;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        padding-bottom: .06rem;
        margin-left: .12rem;
        text-decoration: line-through
    }
    .changeNum{
        position: absolute;
        display: flex;
        align-items: center;
        right:.2rem;
        bottom: .3rem;
        width: 1.6rem;
        justify-content: space-between;
    }
    .reduce,.add{
        background-color: #F6F8FA;
        border-radius: 50%;
        width: .4rem;
        height: .4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#333333;
        font-family: 'PingFangSC-Bold';
        font-size: .34rem;
    }
    .thisNum{
        color:#333333;
        font-family: 'PingFangSC-Regular';
    }
    .like{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
        margin-left: 2.74rem;
        margin-top: .6rem;
    }
    .moreContainer{
        margin-top: 10px;
        width: 100vw;
        margin-left: .12rem;
        padding-bottom: 530px;
    }
    .moreGoods{
        width: 100vw;
    }
    .moreGood{
        width: 3.33rem;
        height: 220px;
        float: left;
        background-color: #FFF;
        margin-bottom: .2rem;
        margin-left: .2rem;
        border-radius: .2rem;
        position: relative;
    }
    .showImg{
        margin: 0 auto;
        margin-top: 15px;
        width: 2.2rem;
        height: 2.2rem;
        background-color: #F6F8FA;
        background-position: center;
        background-size: cover;
    }
    .intro{
        text-align:left;
        width: 85%;
        margin: 0 auto;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .28rem;
        margin-top: .1rem;
    }
    .moreTag{
        display: flex;
        align-items: center;
        margin-left: .3rem;
        margin-top: .1rem;
    }
    .morePriceImg{
        width: .44rem;
        height: .28rem;
        background-position: center;
        background-size: contain;
    }
    .moreTypeImg{
        width: .8rem;
        height: .26rem;
        background-position: center;
        background-size: contain;
        margin-left: .1rem;
    }
    .morePrice{
        margin-left: .3rem;
        margin-top: .1rem;
        color:#FB4866;
        display: flex;
        align-items:end;
    }
    .moreIndex{
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .moreNum{
        font-family: 'PingFangSC-Bold';
        font-size: .32rem;
    }
    .other{
        font-family: 'PingFangSC-Regular';
        color:#33333368;
        font-size: .24rem;
    }
    .card{
        width: .44rem;
        height: .44rem;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-10addCard.png);
        position: absolute;
        right: .3rem;
        bottom: .3rem;
    }
    .payContent{
        display: flex;
        align-items: center;
        width: 6.86rem;
        justify-content: space-between;
    }
    .cashPay{
        display: flex;
        align-items: center;
    }
    .notPayImg{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-13notCheck.png);
        margin-left: .2rem;
    }
    .payImg{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-14check.png);
        margin-left: .2rem;
    }
    .payAll{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        margin-left: .1rem;
        font-size: .28rem;
    }
    .countContainer{
        display: flex;
        align-items: center;
    }
    .countTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .28rem;
    }
    .payNumContainer{
        color:#FB4866;
        display: flex;
        align-items: center;
    }
    .payIndex{
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .payNum{
        font-family: 'PingFangSC-Bold';
        font-size: .32rem;
        margin-right: .1rem;
    }
    .gotoPay{
        width: 1.8rem;
        height: .7rem;
        border-radius: .7rem;
        background-color: #FB4866;
        color:#FFF;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>